<template>
  <div class="connect">
    <div class="title">首页</div>
    <div class="left">
      <div class="data">
        <div class="data-head">今日数据变动</div>
        <ul style="padding: 0 29px 0 0">
          <li>
            <div>新增学员</div>
            <div>
              <span class="number">{{ nowdata.addCounts }}</span
              >人
            </div>
          </li>
          <li>
            <div>待续费学员</div>
            <div>
              <span class="number">{{ nowdata.renewCounts }}</span
              >人
            </div>
          </li>
          <li>
            <div>今日课节</div>
            <div>
              <span class="number">{{ nowdata.courseCounts }}</span
              >人
            </div>
          </li>
          <li>
            <div>请假人数</div>
            <div>
              <span class="number">{{ nowdata.leaveCounts }}</span
              >人
            </div>
          </li>
          <li>
            <div>上课学员人数</div>
            <div>
              <span class="number">{{ nowdata.studentCounts }}</span
              >人
            </div>
          </li>
          <li>
            <div>上课老师人数</div>
            <div>
              <span class="number">{{ nowdata.teacherCounts }}</span
              >人
            </div>
          </li>
        </ul>
      </div>
      <div class="echarts">
        <div id="main" style="width: 100%; height: 100%"></div>
      </div>
    </div>
    <div class="right">
      <div class="remind">
        <div class="title">事项提醒</div>
        <div class="right-content">
          <div class="matter">
            <div class="matter-row">
              <div class="title">续费</div>
              <div class="value">
                <div>有<span>0</span>位学员剩余课时低于2</div>
                <div>
                  <span class="iconfont icon-zhixiang"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="birth" style="overflow-y: scroll;">
        <div class="right-c">
          <div class="right-title">生日学员</div>
          <div class="right-content" v-for="item in birthday" :key="item.id">
            <div class="birthday">
              <div class="birthday-row">
                <div class="title" >
                  <img src="{{item.photo}}" alt="" srcset="" />
                </div>
                <div class="value">
                  <div>{{item.name}}</div>
                  <div>{{item.birthday}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "index",
  data() {
    return {
      birthday: [],
      nowdata: [],
    };
  },
  created() {
    this.nowdatalist(), this.birthdaylist();
  },
  mounted() {
    this.echarts();
  },
  methods: {
    async echarts() {
      let monthlist = [];
      let countslist = [];
      let monthlist_to = [];
      let countslist_to = [];
      const token = window.sessionStorage.getItem("access_token");
      // 学生总数
      const { data: res } = await this.axios.get(
        "http://www.eshareedu.cn/edusystems/api/students/allcounts?year=2021",
        { headers: { token } }
      );
      console.log(res.data.list);
      res.data.list.forEach((item) => {
        monthlist.push(item.month);
        countslist.push(item.counts);
      });
      // 单月增加
      const { data: val } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/students/monthcounts?year=2021",
        { headers: { token } }
      );
      console.log(val.data.list);
      val.data.list.forEach((item) => {
        monthlist_to.push(item.month);
        countslist_to.push(item.counts);
      });

      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option = {
        title: {
          text: "学员数据",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["学生总数", "单月增加"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: monthlist,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "学生总数",
            type: "line",
            // stack: "总量",
            data: countslist,
          },
          {
            name: "单月增加",
            type: "line",
            // stack: "总量",
            data: countslist_to,
          },
        ],
      };
      myChart.setOption(option);
    },
    async nowdatalist() {
      const token = window.sessionStorage.getItem("access_token");
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/students/todaycounts",
        { headers: { token } }
      );
      this.nowdata = res.data.model;
      console.log(this.nowdata);
    },
    async birthdaylist() {
      const token = window.sessionStorage.getItem("access_token");
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/students/birthday",
        { headers: { token } }
      );
      this.birthday = res.data.list;
      console.log(this.birthday);
    },
  },
};
</script>

<style scoped>
li,
ul {
  list-style: none;
}
.connect {
  z-index: 998;
  margin-top: 10px;
  padding-left: 19px;
  position: fixed;
  bottom: 0;
  left: 100px;
  top: 50px;
  right: 0;
  overflow-y: auto;
  background-color: #f1f2f6;
}
.title {
  margin-bottom: 14px;
  padding-top: 10px;
  text-align: left;
}
.left {
  float: left;
  width: 1426px;
}
.left .data {
  background-color: #fff;
  padding-left: 30px;
}
.left .data .data-head {
  height: 45px;
  line-height: 45px;
  text-align: left;
}
.left .data ul {
  display: flex;
  justify-content: space-around;
}
.left .data ul li {
  position: relative;
  text-align: center;
  flex: 1;
  margin-bottom: 13px;
  height: 80px;
  padding-top: 20px;
  box-sizing: border-box;
  border: 1px solid #f6f6f6;
}
.left .data ul li div {
  font-size: 12px;
  margin-bottom: 5px;
}
.left .data ul li .number {
  text-align: center;
  font-size: 12px;
  color: #f64f41;
  font-weight: 700;
  margin-top: 8px;
}
.left .echarts {
  width: 100%;
  height: 400px;
  background-color: #fff;
}

.right {
  float: right;
  width: 300px;
  display: flex;
  flex-direction: column;
}
.right .remind {
  background-color: #fff;
  margin-bottom: 16px;
  flex: 1;
}
.right .remind .title {
  background: #fff;
  height: 20px;
  line-height: 20px;
  padding-left: 10px;
  font-size: 14px;
}
.right .remind .matter {
  min-height: 173px;
  padding-bottom: 15px;
  padding-top: 5px;
  box-sizing: border-box;
  padding-left: 15px;
}
.right .remind .matter .matter-row {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}
.right .remind .matter .matter-row > .title {
  color: #0387ff;
  padding: 3px 8px;
  margin-right: 14px;
  background-color: #e8f5fe;
  width: 54px;
  text-align: center;
}
.right .remind .matter .matter-row .value {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-right: 27px;
}
.right .birth {
  background-color: #fff;
  flex: 1;
}
.right .birth .right-c {
  background: #fff;
  flex: 1;
  box-sizing: border-box;
  margin-bottom: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.right .birth .right-c .right-title {
  background: #fff;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  padding-left: 10px;
  font-size: 14px;
}
.right .birth .right-c .right-content {
  flex: 1;
  position: relative;
  overflow-y: auto;
}
.right .birth .right-c .right-content .birthday {
  left: 10px;
  right: 5px;
  top: 0;
  bottom: 0;
  overflow-y: auto;
}
.right .birth .right-c .right-content .birthday .birthday-row {
  margin-top: 4px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f6f6f6;
  padding-bottom: 4px;
}
.right .birth .right-c .right-content .birthday .birthday-row img {
  width: 30px;
  height: 30px;
  border-radius: 5px;
}
.right .birth .right-c .right-content .birthday .birthday-row .value {
  margin-left: 10px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-right: 20px;
}
</style>
